<script lang="ts" setup>

import { initEmoji } from './index';

interface IEmoji {
  title: string;
  name: string;
}

const emits = defineEmits<{(event: 'update:value', value: string): void;
  (event: 'onSubMit', v: string): void;
  (event: 'update:value', v: string): void;
}>();
const props = defineProps({
  type: {
    type: Number,
    default: 0
  },
  value: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: '留下点什么吧...'
  }
});
const valueComputed = computed({
  get() {
    return props.value;
  },
  set(v) {
    emits('update:value', v);
  }
});
const placeholderComputed = computed(() => props.placeholder);
const emoji = ref<IEmoji[]>([]);
const emojiRef = ref<HTMLDivElement | null>(null);
const isShowEmojiSelect = ref(false);
const input = ref('');
const handleShowEmoji = (name: string) => {
  return new URL(`./face/${name}`, import.meta.url).href;
};
const handleClickEmoji = (item: IEmoji) => {
  valueComputed.value += item.title;
  input.value += item.title;
};
onMounted(() => {
  emoji.value = initEmoji();
  // 点击表情容器外，隐藏
  onClickOutside(emojiRef.value, () => {
    isShowEmojiSelect.value = false;
  });
});
onBeforeUnmount(() => {
  emits('update:value', '');
});
defineOptions({
  name: 'CoComment'
});
</script>

<template>
  <div class="cz-w-full">
    <div class="comment-title">
      <slot />
    </div>
    <div class="comment-input-wrapper">
      <div class="cz-flex">
        <div class="avatar">
          <img
            alt=""
            src="@/assets/default-avatar.jpg"
          >
        </div>
        <div class="cz-ml-3 cz-w-full">
          <div class="comment-input">
            <textarea
              v-model="input"
              :placeholder="placeholderComputed as string"
              class="comment-textarea"
            />
          </div>
          <div class="emoji-container cz-flex cz-justify-between">
            <div
              class="cursor-pointer"
              @click="isShowEmojiSelect=!isShowEmojiSelect"
            >
              <img
                class="cz-w-6 cz-h-6"
                src="./emoji.svg"
              >
            </div>
            <div>
              <el-button
                v-if="input"
                icon="Delete"
                @click="()=> input=''"
              >
                清空
              </el-button>
              <el-button
                class="upload-btn comment-btn px-5px"
                icon="Promotion"
                style="margin-left: auto;"
                @click="()=> {emits('onSubMit', input); input=''}"
              >
                提交
              </el-button>
            </div>
          </div>
          <div
            v-show="isShowEmojiSelect"
            ref="emojiRef"
            class="emoji-wrapper animate__fadeInDown"
          >
            <span
              v-for="item in emoji"
              :key="item.name"
              class="emoji-item cz-p-[5px]"
              @click="handleClickEmoji(item)"
            >
              <img
                :src="handleShowEmoji(item.name)"
                :title="item.title"
                class="cz-w-6 cz-h-6 emoji"
              >
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.comment-title {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 40px;
  margin-bottom: 10px;
}

.comment-input-wrapper {
  border: 1px solid rgba(144, 147, 153, .31);
  border-radius: 4px;
  padding: 10px;
  margin: 0 0 10px;
}

.avatar {
  height: 40px;
  min-width: 40px;
  width: 40px;
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  line-height: normal;
  position: relative;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
}

img {
  border-style: none;
}

.avatar .icon, .avatar .image, .avatar .responsive__content, .avatar img, .avatar svg {
  border-radius: inherit;
  display: inline-flex;
  height: inherit;
  width: inherit;
}

.comment-input {
  position: relative;
}

.comment-textarea {
  font-size: .875rem;
  color: var(--cz-secondary-color, #4c4948);
  outline: none;
  padding: 10px 5px;
  min-height: 122px;
  resize: none;
  width: 100%;
  border-radius: 4px;

}

@media (min-width: 960px) {
  .comment-textarea {
    background: url(@/assets/commentBack.webp) 100% 100% no-repeat;
  }
}

button, input, select, textarea {
  background-color: transparent;
  border-style: none;
}

.emoji-container, .send-wrapper {
  display: flex;
  align-items: center;
}

.emoji-container {
  margin: 10px 0;
}

.emoji-item {
  cursor: pointer;
  display: inline-block;
  float: left;
}

.emoji-wrapper {
  max-height: 150px;
  overflow-y: auto;
}

.emoji {
  user-select: none;
  margin: 0.25rem;
  display: inline-block;
  vertical-align: middle;
}
</style>
